import {
  password_validate,
  password_confirm_validate,
  mobile_validator,
} from "../utils";
import { drawerFormState } from "../store";
import { LockOutlined } from "@ant-design/icons-vue";
import {
  countryCodeDict,
  dicts,
  drawerChannelMap,
  merchantUsersMap,
} from "../dict";
export default defineComponent({
  setup(props, { slots, expose, attrs, emit }) {
    return () => (
      <>
        <a-row class="s-drawer-extra-row">
          <s-title>{$t("base.accountInfo")}</s-title>
        </a-row>
        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={12}>
            <a-form-item
              label={$t("table80")}
              name="password"
              rules={[
                {
                  required: true,
                  validator: password_validate(),
                  trigger: ["change"],
                },
              ]}
            >
              {withDirectiveInput({
                vNode: (
                  <a-input-password
                    maxlength={13}
                    vModel:value={drawerFormState.password}
                    placeholder={$t("placeholder29")}
                    vSlots={{
                      prefix: (
                        <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                      ),
                    }}
                  />
                ),
              })}
            </a-form-item>
          </a-col>
          <a-col span={12}>
            <a-form-item
              label={$t("table70")}
              name="password_confirmation"
              rules={[
                {
                  required: true,
                  validator: password_confirm_validate(),
                  trigger: ["change"],
                },
              ]}
            >
              {withDirectiveInput({
                vNode: (
                  <a-input-password
                    maxlength={13}
                    vModel:value={drawerFormState.password_confirmation}
                    placeholder={$t("placeholder30")}
                  >
                    {{
                      prefix: (
                        <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                      ),
                    }}
                  </a-input-password>
                ),
              })}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={12}>
            <a-form-item
              label={$t("table2")}
              name="mobile_number"
              // help={helpRef.value}
              rules={[
                {
                  required: true,
                  trigger: ["change"],
                  message: $t("placeholder32"),
                  // validator: mobile_validator,
                },
              ]}
            >
              {withDirectiveInput({
                vNode: (
                  <a-input
                    onKeydown={(e: any) => {}}
                    vModel:value={drawerFormState.mobile_number}
                    placeholder={$t("placeholder49")}
                  >
                    {{
                      addonBefore: () => (
                        <a-select
                          allowClear
                          vModel:value={drawerFormState.mobile_area}
                          style="min-width: 120px"
                          placeholder={$t("placeholder31")}
                          options={countryCodeDict}
                          showSearch={true}
                          filterOption={filterOption}
                          onSelect={(value: any, option: any) =>
                            mobile_validator(
                              null,
                              drawerFormState.mobile_number
                            )
                          }
                          onkeyup={({ target }) => only_limit_charts(target)}
                        />
                      ),
                    }}
                  </a-input>
                ),
              })}
            </a-form-item>
          </a-col>
          <a-col span={12}>
            <a-form-item label={$t("table14")} name="merchant_uid">
              <a-select
                allowClear
                vModel:value={drawerFormState.merchant_uid}
                placeholder={$t("placeholder24")}
                options={arrayToOptions(merchantUsersMap.value, {
                  label: "name",
                  value: "id",
                })}
                onChange={(value: any) => {
                  if (!isEmptyType(value)) {
                    drawerChannelMap.value = dicts.value.channel.filter(
                      ({ merchant_uid }: any) => {
                        return merchant_uid === value;
                      }
                    );
                  } else {
                    drawerChannelMap.value = deepClone(dicts.value.channel);
                  }
                  drawerFormState.channel_id = undefined;
                }}
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row" gutter={16}>
          {!isEmptyType(drawerFormState.merchant_uid) ? (
            <a-col span={12}>
              <a-form-item label={$t("table13")} name="channel_id">
                <a-select
                  allowClear
                  vModel:value={drawerFormState.channel_id}
                  placeholder={$t("placeholder37")}
                  options={arrayToOptions(drawerChannelMap.value, {
                    label: "name",
                    value: "id",
                  })}
                  onChange={(value: any) => {
                    if (!isEmptyType(value)) {
                      const item = merchantUsersMap.value.find(
                        ({ channel_ids }: any) => {
                          return channel_ids.includes(value);
                        }
                      );
                      drawerFormState.merchant_uid = item?.id ?? undefined;
                    } else {
                      drawerFormState.merchant_uid = undefined;
                      drawerChannelMap.value = deepClone(dicts.value.channel);
                    }
                  }}
                />
              </a-form-item>
            </a-col>
          ) : null}
        </a-row>
      </>
    );
  },
});
